<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle()" width="600px" @ok="handleOk">
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" size="small">
      <a-tab-pane tab="区域表" key="form1">
        <AreaForm ref="form1"/>
      </a-tab-pane>
    </a-tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, useAttrs, getCurrentInstance, nextTick} from 'vue';
import {BasicDrawer, useDrawerInner} from '@/components/drawer';
import AreaForm from './AreaForm.vue';
// 声明Emits
const emit = defineEmits(['success', 'register']);
const attrs = useAttrs();
//是否是更新模式
const isUpdate = ref(true);
//是否显示底部按钮
const showFooter = ref(true);
//当前选中tab
const activeKey = ref('form1');
//当前选中对象
const selectData = ref();
const ctx: any = getCurrentInstance();
//表单赋值
const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
  activeKey.value = 'form1';
  isUpdate.value = !!data?.isUpdate;
  //设置是否显示底部
  setDrawerProps({confirmLoading: false, showFooter: showFooter.value});
  selectData.value = data;
  handleTabChange();
});

/**
 * 获取标题
 */
function getTitle() {
  return !isUpdate.value ? '新增区域' : '编辑区域';
}

/**
 * tab切换事件
 */
function handleTabChange() {
  nextTick(() => {
    ctx.refs[activeKey.value].setData(selectData.value);
  });
}

/**
 * 确定按钮事件
 */
async function handleOk() {
  ctx.refs[activeKey.value].handleSubmit({
    emit: emit,
    setDrawerProps,
    closeDrawer
  });
}
</script>
